<template>
	<view class="page_wrapper page_bg">
		<view class="winner_block shadow-border" :class="{'win_end': win.status === 'end'}" v-for="(win, index) in mathExamWinList">
			<block v-if="win.status === 'doing'">
				<view class="winner_title">{{win.createUser.name}}发布的{{win.maxCalcNum}}以内{{win.calcTypeCn}}法挑战</view>
				<view class="score_block">
					<view class="left_block">当前榜首: <view class="winner_name">{{win.winnerUser.name}}</view></view>
					<view class="right_block">挑战题量: {{win.calcTotalCount}}道</view>
				</view>
				<view class="stat_block">
					<view class="left_block">榜首卫冕: {{win.winCount}}次</view>
					<view class="right_block">参与人次: {{win.joinUserCount}}次</view>
				</view>
				<view class="score_block">
					<view class="left_block">最好成绩: {{win.winnerScore}}分</view>
					<view class="right_block" style="display: flex; align-items: center;">
						<view>最快用时: {{win.winnerUseTimeTxt}}</view>
						<image src="@/static/images/zan_icon.png" class="zan_icon" style="width: 20px; height: 20px; margin-left: 3px;" />
					</view>
				</view>
				<view class="" style="margin-top: 7px;">发起日期: {{dateTimeFormat(win.createTime)}}</view>
				
				<view class="btns_block">
					<block v-if="win.status === 'doing'">
						<button class="fcz_btn share_btn" :id="index" open-type="share">分享挑战</button>
						<view class="fcz_btn play_btn" @tap="startCalcs(win)">挑战榜首</view>
					</block>
					<block v-else>
						<view class="fcz_btn play_btn disabled">挑战已结束</view>
					</block>
				</view>
			</block>
			<block v-else>
				<view class="win_end_block">
					<view class="end_title">
						<view>《{{win.maxCalcNum}}以内{{win.calcTypeCn}}法》挑战</view>
						<view>第一名</view>
					</view>
					<view class="winner_name_block">{{win.winnerUser.name}}</view>
					<view class="winner_detail">
						<view class="end_score">成绩是:{{win.winnerScore}}分</view>
						<view>最快用时: {{win.winnerUseTimeTxt}}</view>
					</view>
				</view>
			</block>
		</view>
		
	</view>
</template>

<script>
	import {request} from '@/utils/request.js'
	import {storageData} from '@/utils/storageData.js'
	import {parseTime} from '@/utils/index.js'
	export default {
		data() {
			return {
				query: {
					pageNo: 1,
					pageSize: 20
				},
				mathExamWinList: [],
				totalCount: 0,
			}
		},
		onShow() {
			this.fetchData()
		},
		methods: {
			dateTimeFormat(time) {
				return parseTime(time)
			},
			fetchData() {
				const queryData = JSON.parse(JSON.stringify(this.query))
				// request.get(
				// 	'/mathExamWins/search', queryData
				// ).then(res => {
				// 	this.mathExamWinList = res.items
				// }).catch(err => {
				// 	uni.hideLoading()
				// 	console.log(err)
				// })
			},
			startCalcs(win) {
				uni.navigateTo({
					url: '/pages/mathCalcs/onlineTest?mathExamWinId=' + win.id
				})
			},
			shareCalc(win) {
				
			}
		},
		onShareAppMessage(res) {
			const userInfo = storageData.getLoginUser()
			console.log(userInfo)
			
			if (res.from === 'button') {
					// 来自页面内分享按钮
					console.log(res.target)
					const index = res.target.id
					const win = this.mathExamWinList[index]
					const title = win.createUser.name + '发布的' + win.maxCalcNum + '以内' + win.calcTypeCn + '法挑战,榜首最快用时:' + win.winnerUseTimeTxt + ',邀请您来战。'
					
					return {
						title: title,
						path: '/pages/mathExamWin/mathExamWin?shareUc=' + userInfo.userCode,
						mpId: 'wxcbbe1a868c5c3c3c', //此处配置微信小程序的AppId
					}
			}
			return {
				title: '小朋友们口算速度越来越快，邀请您家小朋友来试试',
				path: '/pages/mathExamWin/mathExamWin?shareUc=' + userInfo.userCode,
				mpId: 'wxcbbe1a868c5c3c3c', //此处配置微信小程序的AppId
			}
		},
		onShareTimeline(res) {
			const userInfo = storageData.getLoginUser()
			return {
				title: '小朋友们口算速度越来越快，邀请您家小朋友来试试',
				path: '/pages/mathExamWin/mathExamWin?shareUc=' + userInfo.userCode,
				mpId: 'wxcbbe1a868c5c3c3c', //此处配置微信小程序的AppId
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page_wrapper{
		overflow-y: scroll;
		.winner_block{
			margin: 20px 20px 0px 20px;
			/* 设置元素的基本样式 */  
			height: auto;  
			padding: 20px;  
			background-color: #fff;  
			  
			/* 添加边框 */  
			border: 2px solid #e2e2e2;  
			  
			/* 添加阴影效果 */  
			box-shadow: 0 0 10px 5px rgba(100, 20, 100, 0.3);  
			.winner_title{
				font-size: 16px;
			}
			.score_block{
				margin-top: 10px;
				display: flex;
				justify-content: space-between;
				.left_block{
					flex: 1;
					display: flex;
					align-items: center;
					.winner_name{
						font-size: 17px;
						font-weight: 500;
						margin-left: 5px;
					}
				}
				.right_block{
					flex: 1;
				}
			}
			.stat_block{
				margin-top: 10px;
				display: flex;
				justify-content: space-between;
				.left_block{
					flex: 1;
				}
				.right_block{
					flex: 1;
				}
			}
			.btns_block{
				display: flex;
				.fcz_btn{
					width: 130px;
					padding: 0px 10px;  
					font-size: 14px;  
					color: white;  
					border: none;  
					border-radius: 4px;  
					cursor: pointer;  
					transition: background 0.3s ease; /* 可选：添加渐变过渡效果 */  
					margin-top: 10px;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				.share_btn{
					margin-right: 10px;
					background: linear-gradient(to right, #FF4500, #FF8C00); /* 渐变从蓝绿色到稍浅的蓝绿色 */  
				}
				.play_btn{  
					flex: 1;
					background: linear-gradient(to right, #009688, #00b8d4); /* 渐变从蓝绿色到稍浅的蓝绿色 */  
				}
				.play_btn.disabled{
					padding: 5px 0px;
					background: linear-gradient(to right, #999, #ccc); /* 灰色渐变 */  
				}
			}
			
		}
		.winner_block:last-child {
			margin-bottom: 20px;
		}
		.win_end{
			padding: 0px;
			
			.win_end_block{
				height: 190px;
				background-image: url('https://www.hzif.cn/mathematics-attach/share.png/q/qylaauoqmnrpxcow.jpg');
				background-size: 100% 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.end_title{
					font-size: 14px;
					color: firebrick;
					display: flex;
					flex-direction: column;
					align-items: center;
				}
				.winner_name_block{
					font-size: 25px;
					font-weight: bold;
					margin: 5px 0px 10px 0px;
				}
				.winner_detail{
					font-size: 14px;
					color: #555555;
					display: flex;
					.end_score{
						margin-right: 50px;
					}
				}
			}
		}
	} 
 
</style>
